<template>
    <div>
        <el-form size="large" class="login-content-form" ref="loginForm" :model="ruleForm" :rules="rules">
            <el-form-item class="login-animation1" prop="username">
                <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username" clearable autocomplete="off">
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <ele-User/>
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item class="login-animation2" prop="password">
                <el-input
                    :type="isShowPassword ? 'text' : 'password'"
                    :placeholder="$t('message.account.accountPlaceholder2')"
                    v-model="ruleForm.password"
                    autocomplete="off"
                >
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <ele-Unlock/>
                        </el-icon>
                    </template>
                    <template #suffix>
                        <i
                            class="iconfont el-input__icon login-content-password"
                            :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
                            @click="isShowPassword = !isShowPassword"
                        >
                        </i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item class="login-animation2" >
            <el-checkbox v-model="ruleForm.isAutoLogin" label="90天内自动登录" size="large" />
        </el-form-item>
            <!--		<el-form-item class="login-animation3">
                  <el-col :span="15">
                    <el-input
                      type="text"
                      maxlength="4"
                      :placeholder="$t('message.account.accountPlaceholder3')"
                      v-model="ruleForm.code"
                      clearable
                      autocomplete="off"
                    >
                      <template #prefix>
                        <el-icon class="el-input__icon"><ele-Position /></el-icon>
                      </template>
                    </el-input>
                  </el-col>
                  <el-col :span="1"></el-col>
                  <el-col :span="8">
                    <el-button class="login-content-code">1234</el-button>
                  </el-col>
                </el-form-item>-->
            <el-form-item class="login-animation4">
                <el-button type="primary" class="login-content-submit" round @click="toVerify(loginForm)" :loading="loading.signIn">
                    <span>{{ $t('message.account.accountBtnText') }}</span>
                </el-button>
            </el-form-item>
        </el-form>
        <Verify ref="verify" mode="pop" captcha-type="blockPuzzle" :img-size="{ width: '330px', height: '155px' }" @success="onSignIn"/>
        <Enterprise ref="enterprise" v-model:dialogDrawer="isShowAllEnterprise" :all-enterprise="enterprises" @onSubmit="goHomePage"/>
    </div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, computed, ref, getCurrentInstance,onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {useI18n} from 'vue-i18n'
import Cookies from 'js-cookie'
import {storeToRefs} from 'pinia'
import {useThemeConfig} from '/@/stores/themeConfig'
import {initFrontEndControlRoutes} from '/@/router/frontEnd'
import {initBackEndControlRoutes} from '/@/router/backEnd'
import {Session,Local} from '/@/utils/storage'
import {formatAxis} from '/@/utils/formatTime'
import {NextLoading} from '/@/utils/loading'
import Verify from '/@/components/verifition/Verify.vue'
import {login, setEnterprise,isAutoLogin} from '/@/api/login'
import Enterprise from '/@/components/enterprise/index.vue'
import {useUserInfo} from '/@/stores/userInfo'

export default defineComponent({
    name: 'loginAccount',
    components: {
        Verify,
        Enterprise
    },
    setup() {
        const {t} = useI18n()
        const loginForm = ref()
        const verify = ref()
        const storesThemeConfig = useThemeConfig()
        const {themeConfig} = storeToRefs(storesThemeConfig)
        const storesUserInfo = useUserInfo()
        const route = useRoute()
        const router = useRouter()
        const { proxy } = <any>getCurrentInstance();

        const state = reactive({
            isShowPassword: false,
            isShowAllEnterprise: false,
            enterprises: [],
            ruleForm: {
                username: 'admin',
                password: 'admin',
                isAutoLogin: false,
                captcha: ''
            },
            loading: {
                signIn: false,
            },
            rules: {
                username: {required: true, message: '请输入用户名', trigger: 'blur'},
                password: {required: true, message: '请输入密码', trigger: 'blur'}
            },
        })
        // 时间获取
        const currentTime = computed(() => {
            return formatAxis(new Date())
        })
        const toVerify = (loginForm: any) => {
            state.loading.signIn = true
            try {
                loginForm.validate((valid: boolean) => {
                    if (!valid) {
                        state.loading.signIn = false
                    }
                    verify.value.show()
                })
            } catch (e) {
                console.log(e)
                state.loading.signIn = false
            }
        }
        // 登录
        const onSignIn = async (verifyParam: any) => {
            // state.loading.signIn = true;
            state.ruleForm.captcha = verifyParam.captchaVerification
            try {
                const res = await login(state.ruleForm)
                commonLogin(res)
            } catch (e) {
                console.log(e)
                state.loading.signIn = false
            }
        }
        // 登录成功后的跳转
        const signInSuccess = () => {
            // 初始化登录成功时间问候语
            let currentTimeInfo = currentTime.value
            // 登录成功，跳到转首页
            // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
            if (route.query?.redirect) {
                router.push({
                    path: <string>route.query?.redirect,
                    query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
                })
            } else {
                router.push('/')
            }
            // 登录成功提示
            // 关闭 loading
            state.loading.signIn = true
            const signInText = t('message.signInText')
            ElMessage.success(`${currentTimeInfo}，${signInText}`)
            // 添加 loading，防止第一次进入界面时出现短暂空白
            NextLoading.start()
        }
        // 选择企业返回
        const goHomePage = (val) => {
            // 登录的企业
            setEnterprise(val)

            // 登录成功 初始化
            proxy.initialize()
            // TODO 获取路由菜单.....
            // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
            Cookies.set('userName', state.ruleForm.username)
            if (!themeConfig.value.isRequestRoutes) {
                // 前端控制路由，2、请注意执行顺序
                initFrontEndControlRoutes()
                signInSuccess()
            } else {
                // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
                // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
                initBackEndControlRoutes()
                // 执行完 initBackEndControlRoutes，再执行 signInSuccess
                signInSuccess()
            }
        }


        const commonLogin = async (res) =>{
             // 存储 token 到浏览器缓存
             Session.set('token', res.data.token)
                Cookies.set('userId', res.data.userId)
                storesUserInfo.userInfos.id = res.data.userId
                // 如果选定90天免登录
                if(state.ruleForm.isAutoLogin){
                    Local.set("17work",{userId:res.data.userId,token:res.data.token,userName:res.data.username})
                }

                // TODO 如果用户关联企业数量大于1则弹框让用户选择进入哪个
                if (res.data.enterprises && res.data.enterprises.length > 1) {
                    // {id: 企业id, name: 企业名称}
                    // await setEnterprise(res.data.enterprises[0].id)
                    state.enterprises = res.data.enterprises
                    state.isShowAllEnterprise = true
                }else{
                    // 只有一个企业, 保存用户在该企业的名称
                    if (res.data.enterprises && res.data.enterprises.length == 1) {
                      Cookies.set('userName', res.data.enterprises[0].userName)
                      Cookies.set('enterpriseName', res.data.enterprises[0].name)
                    } else {
                      Cookies.set('userName', res.data.nickname)
                      storesUserInfo.userInfos.userName = res.data.nickname
                    }
                    // 登录成功 初始化
                    proxy.initialize()
                    // TODO 获取路由菜单.....
                    // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
                    // Cookies.set('userName', state.ruleForm.username)
                    if (!themeConfig.value.isRequestRoutes) {
                        // 前端控制路由，2、请注意执行顺序
                        await initFrontEndControlRoutes()
                        signInSuccess()
                    } else {
                        // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
                        // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
                        await initBackEndControlRoutes()
                        // 执行完 initBackEndControlRoutes，再执行 signInSuccess
                        signInSuccess()
                    }
                }
        }

        onMounted(() => {
            //是否90天内登录。 不为空的时候，
            const workLocal  = Local.get("17work");
            if(workLocal){
                isAutoLogin(workLocal).then(res=>{
                    if(res.code == 0){
                        commonLogin(res)
                    }
                })
            }

        })
        return {
            onSignIn,
            toVerify,
            loginForm,
            verify,
            storesUserInfo,
            goHomePage,
            commonLogin,
            ...toRefs(state),
        }
    },
})
</script>

<style scoped lang="scss">
.login-content-form {
    margin-top: 20px;
    @for $i from 1 through 4 {
        .login-animation#{$i} {
            opacity: 0;
            animation-name: error-num;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            animation-delay: calc($i/10) + s;
        }
    }

    .login-content-password {
        display: inline-block;
        width: 20px;
        cursor: pointer;

        &:hover {
            color: #909399;
        }
    }

    .login-content-code {
        width: 100%;
        padding: 0;
        font-weight: bold;
        letter-spacing: 5px;
    }

    .login-content-submit {
        width: 100%;
        letter-spacing: 2px;
        font-weight: 300;
        margin-top: 15px;
    }
}
</style>
